<template>
    <div class="image-container">
        <div class="image">
            <img :src="imageSrc" alt="示例图片" />
        </div>
        <div class="tags">
            <h3>标签选择：</h3>
            <div v-for="(tag, index) in availableTags" :key="index">
                <label>
                    <input type="checkbox" :value="tag.name" v-model="selectedTags" />
                    {{ tag.name }}
                </label>
            </div>
            <hr>
            <p>已选标签：{{ selectedTags.join(', ') }}</p>
            <button @click="resetTags">重置标签</button>
            <button @click="lable">确认</button>
            <button @click="nextImage">下一张</button>
        </div>
        <transition name="toast-fade">
            <div class="success-toast" v-if="showSuccessToast">
                操作成功！
            </div>
        </transition>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "Label", // 注意：这里更正了拼写错误
    data() {
        return {
            url: {
                getFirstUnlablePhoto: '/medical/lable/getFirstUnlablePhoto',
                getTagsALL: '/medical/lable/getTagsALL',
                lablePhoto: '/medical/lable/lablePhoto'
            },
            imageSrc: '',
            availableTags: [], // 示例标签列表
            selectedTags: [],
            photoName: '', // 用于存储图片名称
            id: '',//用于存储图片id
            showSuccessToast: false
        };
    },
    created() {
        this.fetchImages();
        this.fetchTags(); // 新增获取标签列表的方法调用
    },
    methods: {
        showToast(message) {
            this.showSuccessToast = true;
            setTimeout(() => {
                this.showSuccessToast = false;
            }, 1000);
            console.log(message);
        },

        async fetchImages() {
            try {
                const response = await axios.get(`${this.URLhost}${this.url.getFirstUnlablePhoto}`, {
            params: { tagType: 'palm'}
          });
                console.log(response);
                // 检查响应是否成功
                if (response.status === 200 && response.data && response.data.code === 0) {
                    const imageData = response.data.data.data || {};
                    this.imageSrc = imageData.url || '';
                    // this.availableTags = imageData.tags || [];
                    this.photoName = imageData.name || ''; // 假设图片名称包含在响应数据中
                    this.id = imageData.id || '';
                } else if (response.status === 200 && response.data && response.data.code !== 0) {
                    console.log('服务端返回错误信息:', response.data.msg);
                } else {
                    console.log('无效的响应数据', response);
                }
            } catch (error) {
                console.error('请求失败:', error);
            }
        },
        async fetchTags() {
            try {
                const response = await axios.get(`${this.URLhost}${this.url.getTagsALL}`, {
            params: { tagType: 'palm'}
          });


                if (response.status === 200 && response.data && response.data.code === 0) {
                    const tagsData = response.data.data.data || [];
                    this.availableTags = tagsData.map(tag => ({
                        tag_id: tag.tag_id,
                        name: tag.name
                    }));
                } else if (response.status === 200 && response.data && response.data.code !== 0) {
                    console.log('服务端返回错误信息:', response.data.msg);
                } else {
                    console.log('无效的响应数据', response);
                }
            } catch (error) {
                console.error('请求失败:', error);
            }
        },
        resetTags() {
            this.selectedTags = [];
        },
        //下一张
        nextImage() {
            this.imageSrc = '';
            this.selectedTags = [];
            this.photoName = '';
            this.id = '';
            this.fetchImages();
        },

        async lable() {
            try {
                // 遍历选中的每个标签
                for (const tagName of this.selectedTags) {
                    const tagId = this.availableTags.find(tag => tag.name === tagName).tag_id;

                    console.log('id:' + this.id);
                    console.log('tag_id:' + tagId);
                    console.log('user_id:' + localStorage.getItem('user_id'));

                    // 发送 POST 请求给后端
                    const response = await axios.post(
                        `${this.URLhost}${this.url.lablePhoto}`, null, {
                        params: {
                            tagType: palm,
                            id: this.id,
                            tag_id: tagId,
                            user_id: localStorage.getItem('user_id')
                        }
                    });
                    if (response.status === 200 && response.data && response.data.code === 0) {
                        console.log(`标签 ${tagName} 确认成功`);
                        this.showToast(`标签 ${tagName} 确认成功`);
                    } else if (response.status === 200 && response.data && response.data.code !== 0) {
                        console.log('服务端返回错误信息:', response.data.msg);
                    } else {
                        console.log('无效的响应数据', response);
                    }
                }
            } catch (error) {
                console.error('请求失败:', error);
            }
        }
    }
};
</script>


<style scoped>
.image-container {
    display: flex;
    gap: 20px;
    /* 使用gap代替margin-right简化布局 */
    padding: 20px;
    /* 添加一些内边距 */
    background-color: #f4f4f4;
    /* 背景颜色 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
}

.image {
    flex: 1;
    text-align: center;
    /* 居中图片 */
}

.tags {
    flex: 1;
    padding: 10px;
    /* 给内部元素一点空间 */
    background-color: #fff;
    /* 白色背景 */
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    /* 图片圆角 */
}

.tags h3 {
    color: #333;
    /* 标题颜色 */
    font-size: 1.2em;
    margin-bottom: 10px;
}

.tags label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    /* 文本颜色 */
}

.tags input[type="checkbox"] {
    margin-right: 5px;
    /* 检查框与文本之间的小间距 */
}

.tags hr {
    margin: 15px 0;
    border: none;
    border-top: 1px solid #eee;
}

.tags p {
    margin-bottom: 10px;
    color: #4a4a4a;
}

.tags button {
    display: block;
    width: 100%;
    /* 按钮宽度占满 */
    margin-top: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    color: #1a282e;
    cursor: pointer;
    /* transition: background-color 0.3s ease; */
    font-weight: bold;
    /* 加粗文本 */
    font-size: 16px;
    /* 增大字体大小，可以根据需要调整 */
}

.tags button:hover {
    background-color: darken(#007bff, 10%);
}

.tags button:nth-child(3) {
    background-color: #007bff;
    /* 第三个按钮蓝色 */
}

.tags button:nth-child(4) {
    background-color: #28a745;
    /* 最后一个按钮绿色 */
}

.toast-fade-enter-active,
.toast-fade-leave-active {
    transition: opacity .5s;
}

.toast-fade-enter-from,
.toast-fade-leave-to {
    opacity: 0;
}

.success-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
</style>